<!-- 换装列表详情 -->
<template>
	<view style="200rpx" class="bs">
		<view class="df aic jcsb bb2f h100r header-container">
			<view class="df aic">
				<text>任务状态：</text>
				<text>{{'待换表'}}</text>
			</view>
			<view class="df aic">
				<view class="header-item1  bsb  mr20">
					<text>换模块</text>
				</view>
				<view class="header-item2  bsb">
					<text>换装结果</text>
				</view>
			</view>
		</view>
		<view class="">
			<up-tabs class="df jcsb" :list="list1" @click="click"></up-tabs>
		</view>
	</view>
	<swiper class="f1" :current="currentTab"  :duration="500">
		<swiper-item class="h100 ofys">
			<view class="swiper-item">
				<oldFormVue />
			</view>
		</swiper-item>
		<swiper-item  class="h100 ofys">
			<view class="swiper-item">
				<newFormVue />
			</view>
		</swiper-item>
		<swiper-item  class="h100 ofys">
			<view class="swiper-item">
				<baseInfoVue />
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
import { ref } from 'vue';
import oldFormVue from './oldForm.vue';
import newFormVue from './newForm.vue';
import baseInfoVue from './baseInfo.vue';

const list1 = ref([
	{
		name: '旧表信息'
	},
	{
		name: '新表信息'
	},
	{
		name: '基本信息'
	}
])
const currentTab = ref(0)

const click = (e)=>{
	currentTab.value = e.index
}
</script>

<style lang="scss">
	page{
		height: 100% !important;
		display: flex;
		flex-direction: column;
	}
	.header-container{
		padding: 0 20rpx;
	}
.header-item1{
	padding: 6rpx 16rpx;
	border: 4rpx solid #2D6CE8;
	background-color: #fff;
	border-radius: 16rpx;
	color: #2D6CE8;
	padding-left: 40rpx;
}
.header-item2{
	padding: 10rpx 20rpx;
	border-radius: 16rpx;
	background-color: #2D6CE8;
	color: #fff;
}
:deep(.u-tabs__wrapper__nav){
	display: flex;
	justify-content: space-between;
	padding: 0 40rpx;
}
</style>
